<template>
  <transition name="fade" mode="out-in">
    <div class="income">
      <van-nav-bar
        title="收入流水"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-search
        v-model="search"
        placeholder="搜索业务员或客户"
        show-action
        @search="onSearch"
      >
        <img slot="action" src="@/assets/icon_calendar.png" class="search-icon" @click="onShowDate">
      </van-search>
      
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="income-list">
        <p class="income-list-info">收入合计：1203.00</p>
        <van-list
          v-if="!isNoData"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="item in list"
            :key="item"
            :title="item" 
            size="large" 
            label="描述信息"
            @click="jumpTo"
          >
            <div slot="title">
              <p class="income-title">苏桂英</p>
              <p class="income-title-small">所属业务员：李小明</p>
            </div>
            <p class="income-money">+ 12.03</p>
            <p class="income-date">2018-11-23</p>
          </van-cell>
        </van-list>

        <div class="no-data" v-else>
          <img src="@/assets/blank_illustrations2.png">
          没有更多数据T T...
        </div>
      </van-pull-refresh>

      <van-popup v-model="showDate" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          :formatter="formatter"
        />
      </van-popup>
    </div>
  </transition>
</template>

<script>
import { Button, NavBar, Icon, Search, DatetimePicker, Popup, List, Cell, CellGroup, PullRefresh, Toast } from 'vant'
export default {
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Search.name]: Search,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    [List.name]: List,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [PullRefresh.name]: PullRefresh,
    [Toast.name]: Toast,
  },
  data () {
    return {
      isLoading: false,
      isNoData: true,
      search: '',
      showDate: false,
      currentDate: new Date(),
      list: [],
      loading: false,
      finished: false
    }
  },
  mounted() {

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch() {

    },
    onShowDate() {
      // 选择时间
      this.showDate = true
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 500)
    },
    onRefresh() {
      // 下拉刷新
      setTimeout(() => {
        Toast.success({
          message: '刷新成功',
          duration: 1000
        })
        this.isLoading = false
        // 初始化数据
        this.list = []
        this.isNoData = false
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 500)
    },
    jumpTo() {
      this.$router.push('/income-detail')
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      }
      return value;
    }
  },
}
</script>

<style scoped>
.income {
  height: 100vh;
  overflow: auto;
  background-color: #F3F3F3;
}
.income-list {
  margin-top: 16px;
}
.income-list-info {
  font-size: 13px;
  line-height: 20px;
  margin: 0 0 6px 13px;
}
.income-money {
  font-size: 20px;
  line-height: 30px;
}
.income-date {
  font-size: 12px;
  line-height: 18px;
  color: #999999;
}
.income-title {
  font-size: 16px;
  line-height: 30px;
}
.income-title-small {
  font-size: 12px;
  line-height: 18px;
}
.search-icon {
  display: flex;
  align-items: center;
  width: 22px;
  height: 22px;
  margin: 0 6px;
}
.no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 150px);
  color: #999999;
  font-size: 14px;
  line-height: 20px;
  background-color: #fff;
}
.no-data img {
  margin-bottom: 16px; 
  width: 252px;
}
</style>
